<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        html,body{
            height: 100%;
            width:100%;
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            overflow: auto;
        }
        body >div{
            width: 100px;
            height: 100px;
            margin-left: 3px;
        }
        body div:nth-child(1)
        {
            background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);

        }
        body div:nth-child(2)
        {
            background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
        }

        body div:nth-child(3)
        {
            background-image: linear-gradient(to top, #fad0c4 0%, #fad0c4 1%, #ffd1ff 100%);
        }
        body div:nth-child(4)
        {
            background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
        }
        body div:nth-child(5)
        {
            background-image: linear-gradient(120deg, #a6c0fe 0%, #f68084 100%);
        }
        body div:nth-child(6)
        {
            background-image: linear-gradient(to top, #ebc0fd 0%, #d9ded8 100%);
        }
        body div:nth-child(7)
        {
            background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
        }
        body div:nth-child(8)
        {
            background-image: linear-gradient(to right, #eea2a2 0%, #bbc1bf 19%, #57c6e1 42%, #b49fda 79%, #7ac5d8 100%);
        }
        body div:nth-child(9)
        {
            background-image: linear-gradient(to top, #dbdcd7 0%, #dddcd7 24%, #e2c9cc 30%, #e7627d 46%, #b8235a 59%, #801357 71%, #3d1635 84%, #1c1a27 100%);
        }
        body div:nth-child(10)
        {
            background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
        }

    </style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>